<template>
    <div class="flex">
        <div class="demo-list">
            <div class="demo-item">
                <CardDemo />
            </div>
            <div class="demo-item">
                <PieDemo1 />
            </div>
            <div class="demo-item">
                <PieDemo2 />
            </div>
            <div class="demo-item">
                <PieDemo3 />
            </div>
            <div class="demo-item">
                <PieDemo4 />
            </div>
            <div class="demo-item">
                <PieDemo5 />
            </div>
            <div class="demo-item">
                <BarDemo1 />
            </div>
            <div class="demo-item">
                <LineDemo1 />
            </div>
            <div class="demo-item">
                <BarDemo2 />
            </div>
            <div class="demo-item">
                <CardListDemo />
            </div>
            <div class="demo-item">
                <CardListDemo2 />
            </div>
            <div class="demo-item">
                <CardListDemo3 />
            </div>
        </div>
    </div>
    <div class="demo-item">
        <MapDemo />
    </div>
</template>

<script setup>
import CardDemo from './pages/LeaderboardDemo.vue';
import PieDemo1 from './pages/PieDemo1.vue';
import PieDemo2 from './pages/PieDemo2.vue';
import PieDemo3 from './pages/PieDemo3.vue';
import PieDemo4 from './pages/PieDemo4.vue';
import PieDemo5 from './pages/PieDemo5.vue';
import BarDemo1 from './pages/BarDemo1.vue';
import BarDemo2 from './pages/BarDemo2.vue';
import LineDemo1 from './pages/LineDemo1.vue';
import CardListDemo from './pages/CardListDemo.vue';
import CardListDemo2 from './pages/CardListDemo2.vue';
import CardListDemo3 from './pages/CardListDemo3.vue';
import MapDemo from './pages/MapDemo.vue';
</script>

<style lang="css" scoped>
.demo-list {
    box-sizing: content-box;
    padding: 20px 0;
}
.demo-item {
    margin-top: 20px;
}
</style>
